<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码管理</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link href="<%=path %>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path %>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path %>/hplus/css/animate.min.css" rel="stylesheet">
	<link href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css" rel="stylesheet">

	<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

	<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <style>
        .col-sm-1{
            padding-right: 0;
        }
		JSON
		body {font-size: 14px;padding: 20px;}
		.radio-primary input[type="radio"] + label::after {background-color: #1ab394;}
		.radio-primary input[type="radio"]:checked + label::after {background-color: #1ab394;}
		.radio-primary input[type="radio"]:checked + label::before {border-color: #1ab394;}
		form>div.row{margin-bottom: 16px;}
		a.btn-rounded{margin-right: 16px;}
		/*向上*/
		.triangle_border_up{
			right: 15%;
			width:0;
			height:0;
			border-width:0 16px 16px;
			border-style:solid;
			border-color:transparent transparent #AFAAAA;/*透明 透明  灰*/
			margin:0px auto;
			position:relative;
		}
    </style>
</head>

<body class="gray-bg" >
    <div class="wrapper wrapper-content" id="mybody">
		<div class="tabs-container">
              <ul style="margin:0; padding:0">二维码 > 邀请二维码</ul>
		     <div class="tab-content" style="margin-top: 30px;">
					<div class="ibox-content" id="tab-1">
						<div class="row" style="height:20px;">
							<div class="col-sm-3 jfoucs" style="width:68%">
								<label style="width: 220px;height: 30px;line-height: 30px;font-size: 16px;position: absolute;
    font-weight: bolder;">邀请二维码</label>
								<label  style="float:left;margin-left: 92px;height: 30px;line-height: 33px;color:#DDDDDD">邀请二维码均为临时二维码，能够产生较多的数量，最长为每30天过期，到期后系统自动生成新的二维码，邀请记录合并统计</label>
							</div>
							<div class="col-md-6"></div>

						</div>
						<div class="row">
						</div>
						<div class="row" style="margin-bottom: 20px;margin-right: 10px;">

							<div class="col-sm-1 pull-right">
								<a id="export" href="javascript:void(0)">
									<shiro:hasPermission name="aem_material_list:export_csv">
										<button class="btn btn-primary" type="button">导出CVS</button>
									</shiro:hasPermission>
								</a>
							</div>
							<div class="col-md-3 input-group pull-right">
								<input id="keyWord" type="text" placeholder="请输入二维码持有人姓名" class="input form-control">
								<span class="input-group-btn">
                            <button id="selectCardListByName" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>

                        </span>
							</div>
					    </div>

					    <div class="row" id="urlTableStyle">
					    	<div class="form-group">
								<div class="col-sm-12">
									<table class="display  table-striped table-bordered table-hover dataTable no-footer" role="grid" id="urlTable">
										<thead>
										 <tr>
											<th>二维码持有人</th>
											<th>启用时间</th>
											<th>扫码次数</th>
											<th>关注人数</th>
											<th>二维码</th>
											<th>操作</th>
										 </tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>
							</div>
					    </div>
						<div id="num" style="display: none"></div>
					    <div class="row" id="activityTableStyle" style="display:none;">
					    	<div class="form-group">
								<div class="col-sm-12">
									<table class="display " id="activityTable" style="width:100%;">
										<thead>
										 <tr>
											<th>二维码持有人</th>
											<th>启用时间</th>
											<th>扫码次数</th>
											<th>关注人数</th>
											<th>二维码</th>
											<th>操作</th>
										 </tr>
										</thead>
										<tbody>
										</tbody>
									</table>
								</div>
							</div>
					    </div>
					</div>
				 <!--批量删除  -->
				 <div class="modal fade" id="operation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					 <div class="modal-dialog">
						 <div class="modal-content" style="width:450px;height:250px;">
							 <div class="modal-header" >
								 <h2 class="modal-title" id="myModalLabel" >
									 <span id="operationTitle" style="font-weight:bold">删除确认</span>
								 </h2>
							 </div>
							 <div class="modal-body">
								 <form method="get" class="form-horizontal">
									 <div class="row" style="text-align:center;padding-top:20px;font-weight: 600;">
										 <input type="hidden" id="operationId"  value="">
										 <input type="hidden" id="isDisabled"  value="">
										 <span id="operationContent">您确定要禁用此二维码吗？</span></br></br>
										 <span id="operationContent1">禁用后，禁用后此用户将无法获取邀请二维码！</span>
									 </div>
									 <div class="modal-footer" style="text-align:center;border-top:none;padding-top: 15px;">
										 <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-right:40px;">取消</button>
										 <button type="button" class="btn btn-primary" onclick="operaTionAjax()">确定</button>
									 </div>
								 </form>
							 </div>
						 </div><!-- /.modal-content -->
					 </div><!-- /.modal -->
				 </div>
			 </div>
		</div>
	</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="<%=path %>/hplus/js/content.min.js?v=1.0.0"></script>
    <script src="<%=path %>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path %>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path %>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="<%=path %>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="<%=path %>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path %>/hplus/js/plugins/nouslider/jquery.nouislider.min.js"></script>
    <script src="<%=path %>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path %>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path %>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script src="<%=path %>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path %>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path %>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.1/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/dateUtils.js?v=1.0.0"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

	<style>
		.ui-dialog-button{ text-align:center;white-space:nowrap}
	</style>
  	<script type="text/javascript">
 	var path = "<%=path%>";
  	var keyWord;
  	$.fn.dataTable.ext.errMode = 'none';


  	$("#activity_name").click(function(){
  		func_showActivityDetailDialog();
  	});

    $("#export").click(function(){
        var path = "<%=path%>";
        var href = path+"/wxqrCode/exportQrcodeReport";
        $(this).attr("href",href);
    });

  	$("input[name='code_type']").click(function(){
  		 var codeType=$('input:radio[name="code_type"]:checked').val();
  		 if(codeType=="0"){
  			 $("#show_linkUrl").attr("style","margin-top:10px;display:block;");
  			 $("#show_activity").attr("style","margin-top:10px;display:none;");
  		 }else if(codeType=="1"){
  			$("#show_linkUrl").attr("style","margin-top:10px;display:none;");
 			 $("#show_activity").attr("style","margin-top:10px;display:block;");
  		 }
  	});


  	$("input[name='bind_info']").click(function(){
  		 var bindInfo=$('input:radio[name="bind_info"]:checked').val();
  		 if(bindInfo=="0"){
  			 $("#user_name").attr("style","min-width: 100px; display:none;");
  		 }else if(bindInfo=="1"){
  			storeId=$("#store_id").val();
  			$("#user_name").attr("style","min-width: 100px; display:block;");
  		 }
  	});
  	//自定义弹框
  	function func_artdialog(name,value){
 		var d = dialog({
 			title: name,
 			fixed: true,
 			width: 250,
 	        height:80,
 			content:"<center style='font-size:20px; line-height:60px;'>"+value+"</center>"
 		});
 		d.show();
 	}

/*****************************************     管理        *****************************************/
	var date=1;
	var storeId=null;
	var codeType=0;
  	var urlTable;

	$(function(){
		urlTable=urlDataTable();

	})

    $(function () {
        //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
        $(document).click(function(event){
            var  id= $("#num").html();
            var _con = $('#urlTable');  // 设置目标区域
                if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
                    //$('#divTop').slideUp('slow');  //滑动消失
                    //     $('#tc').hide(1000); //淡出消失
                }
        });
    })


 	function reloadTables(){
			urlTable.ajax.reload();
 	}

	function show_qrcode(data,id){
	    var  result=$('#tc'+id+'').is(":visible");
	    if (result) {
            $('#tc'+id+'').hide(); //淡出消失
		}else{
            $("#num").html(id);
            $('#tc'+id+'').show();
            $('#qrcode'+id+'').html("");
            jQuery('#qrcode'+id+'').qrcode({
                width: 180,
                height:180,
                text:data/*可以通过ajax请求动态设置*/
            });
		}
	}

    //显示悬浮框
    function  showDialog(staffName , staffPhone , departHtml , id_){
        var follow = document.getElementById('' + id_);
        var d = dialog({
            width: 200,
            height:100,
            align: 'right',
            content:"<p>姓名："+staffName+"</p ><p>手机："+staffPhone+"</p ><p>所属部门："+departHtml+"</p >",
            quickClose: true// 点击空白处快速关闭
        });
        d.show(follow);
    }



    // 显示预览一条活动的二维码
    function  showQrcode (beginTime,experTime,data,id_){
        var d = dialog({
            width: 180,
            height:240,
            align: 'bottom',
            content: '<div id="code"></div><img id="qrcode'+id_+'" src="" style="width:140px;height:135px;"/>' +
            '<a id="download" download="qrcode.jpg"></a></br><label style=\'font-size: 11px;' +
            ' color: #f1eded;text-align: left; padding-top: 10px;\'>'+
            ' 此二维码是临时二维码</br>有效时间:</br>'+beginTime+'-'+experTime+'</br>时系统自动生成新的二维码</laber>'

            ,
            quickClose: true// 点击空白处快速关闭
        });
        d.show(document.getElementById(id_));
        $('#code').empty();
        var qrcode = $('#code').qrcode({
            width : 180,
            height:180,
            text : data + ""    /*可以通过ajax请求动态设置*/
        }).attr("style","display:none;");
        var canvas = qrcode.find('canvas').get(0);  // 将生成的二维码转换成图片格式
        $('#qrcode'+id_+'').attr('src', canvas.toDataURL('image/jpg'));
        $(".ui-dialog").css("background-color" , "rgba(7, 17, 27, 0.3)");
    }



    function disable_button(data,isDisabled){
	    if (isDisabled==0){
            $("#operationTitle").html("禁用确认");
            $("#operationId").val(data)
            $("#isDisabled").val(1);
            $("#operationContent").html("您确定要禁用此二维码吗？");
            $("#operationContent1").html("禁用后，禁用后此用户将无法获取邀请二维码！");
            $("#operation").modal("show");
		} else{
            $("#operationTitle").html("恢复确认");
            $("#operationId").val(data);
            $("#isDisabled").val(0);
            $("#operationContent").html("您确定要恢复此二维码吗？");
            $("#operationContent1").html("恢复后，恢复后此用户将恢复获取邀请二维码！");
            $("#operation").modal("show");
		}

	}

    function operaTionAjax(){
        $("#operation").modal("hide");
        var data= $("#operationId").val();
        var isDisable=$("#isDisabled").val();
        var disableUrl=path+"/wxqrCode/ajaxUpdateQrcodeBrowse";
        var wxQrcodeInfo = new Object();
        wxQrcodeInfo.id=data;
        wxQrcodeInfo.isDisable=isDisable;
        $.ajax({
			   url:disableUrl,
			   type:"put",
			   contentType:"application/json;charset=utf-8",
			   dataType:"json",
			   data:JSON.stringify(wxQrcodeInfo),
			   timeout:20000,
			   success:function(data){
				   if(data.status == 200){
                       successDialog("提示","操作成功");
                       reloadTables();
				   }
			   },
			   error:function(xhr,textstatus,thrown){
                   errorDialog("提示","操作失败");
			   }
		   });
    }

	 function urlDataTable(){
     	return $('#urlTable').DataTable({
     		processing: true,
     		//ordering: false,
     		searching: false,
     		info: true,
     		autoWidth: true,
     		lengthChange: false,
     		"order": [[ 2, "desc" ]],
     	    language: {
     	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;margin:0;">   <p>暂无点击数据</p></div>',
     	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
     			infoEmpty: '没有数据',
     			lengthMenu: '每页显示 _MENU_ 条记录',
     			loadingRecords: '正在加载数据....',
     			processing: '正在处理数据....',
     			zeroRecords: '没有找到匹配的记录',
     			paginate: {
     				first: '首页',
     				previous: '前页',
     				next: '后页',
     				last: '尾页'
     			}
     	    },
     	    order: [[2,'desc']],
     		pageLength: 10,
     	    pagingType: 'full_numbers',
     	    columns: func_columns(),
			columnDefs: [{
	    	　　　　'targets' : [0,1,4,5],    //除2.3两列外，都默认不排序
	    	　　　　'orderable' : false
	    	　　},{
                render: function (data, type, full) {
                    var result = data;
                    if (result.length>9) {
                        result=result.substring(0,9)+"...";
                    }
                    var departArry=full.departMentName.split("、");
                    var departHtml="";
                    for (var i=0;i<departArry.length;i++){
                        departHtml+= departArry[i];
                    }
                    var sid="move"+full.id;
                    var innerHtml="<laber id='move"+full.id+"' onmouseover='showDialog(\""+full.staffName+"\",\""+full.staffPhone+"\",\""+departHtml+"\",\""+sid+"\")'> "+result+"</laber>";
                    return innerHtml;
                },
                targets: 0
            }, {
                render: function (data, type, full) {
                    var result = "";
                    if (data != null) {
                        result = formatDateTimeYMDHMS(data);
                    }
                    return result;
                },
                targets: 1
            }, {
                render: function (data, type, full) {
                    var result = "";
                    if (data == null) {
                        result = "-";
                    }else{
                        result=data;
					}
                    return result;
                },
                targets: 2
            }, {
                render: function (data, type, full) {
                    var result = "";
                    if (data == null) {
                        result = "-";
                    }else{
                        result=data;
                    }
                    return result;
                },
                targets: 3
            }, {
                render: function (data, type, full) {
                    var createTime=formatDateTimeYMDHM(full.createTime);
                   var expireTime= formatDateTimeYMDHM(full.expireTime);
                    var sid=""+full.id;

                    var innerHtml="<a id='"+sid+"' style='margin-left:20px;font-size:16px;' href='javaScript:void(0);'onclick='showQrcode(\""+createTime+"\",\""+expireTime+"\",\""+data+"\",\""+sid+"\")'>查看</a>";






                    // var innerHtml="<a style='margin-left:20px;font-size:16px;' href='javaScript:void(0);'onclick='show_qrcode(\""+data+"\",\""+sid+"\")'>查看</a><div id='tc"+full.id+"'  style='display: none;'><div id='sj"+full.id+"' class='triangle_border_up'></div><div id='qimg"+full.id+"' onclick='show_qrcode(\""+data+"\",\""+sid+"\")' style=' padding: 20px;" +
                    //   "text-align: center;width:235px ;height:300px; background: #9c9696; opacity: 0.8;z-index: 1000;position: absolute;'><div  id='qrcode"+full.id+"'></div><label style='margin-left: 10px;font-size: 11px;" +
                    //     "color: #D0C7B9;text-align: left; padding-top: 10px;'>"+
                    //     "此二维码是临时二维码</br>有效时间:</br>"+createTime+"-"+expireTime+"</br>时系统自动生成新的二维码</laber></div></div>";
                    return innerHtml;
                },
                targets: 4
            },{
     	    	render: function(data, type, full) {
         	    	var innerHtml="";
         	             innerHtml+="<shiro:hasPermission name='aem_material_list:show_count_info'> <a style='margin-left:20px;font-size:16px;' href='"+path+"/view/ui/showQrCodeCount?id="+full.id+"&startTime="+formatDateTimeYMD(full.createTime)+"&endTime="+formatDateTimeYMD(full.expireTime)+"&staffName="+encodeURIComponent(full.staffName)+"'>查看二维码统计详情</a></shiro:hasPermission>";
						if (full.isDisable == 0){
                            innerHtml+="<shiro:hasPermission name='aem_material_list:disable'> <a style='margin-left:20px;font-size:16px;' href='javaScript:void(0);'onclick='disable_button (\""+data+"\",\""+full.isDisable+"\")'>禁用</a></shiro:hasPermission>";
                        } else{
                            innerHtml+="<shiro:hasPermission name='aem_material_list:recovery'> <a style='margin-left:20px;font-size:16px;' href='javaScript:void(0);'onclick='disable_button (\""+data+"\",\""+full.isDisable+"\")'>恢复</a></shiro:hasPermission>";
                        }
    				return innerHtml;
     	    	},
    			targets: 5
         		}],
     	    serverSide: true,
     	    ajax: {
     	    	contentType: 'application/json',
     	    	type: 'POST',
     	    	url: func_AjaxUrl(),
     	    	data: function(d){
     				d.extra_search = func_ajaxData();
     				return JSON.stringify(d);
     	    	}
     	    }
     	});
     	 function func_AjaxUrl(){
          	return path+"/wxqrCode/ajaxGetAllBrowseByUrl";
          }
     	 /**
     	  *	后台查询条件
     	  */
     	 function func_ajaxData(){
     		var jsonObject = new Object();
      		 jsonObject.date=date;
             jsonObject.staffName=keyWord;
   	 		 return jsonObject;
     	 }
          /**
           *	设置列名，对应后台
           */
          function func_columns(){
           	var jsonArr = [
        		{"data":"staffName"},
        		{"data":"createTime"},
        		{"data":"sweepNumber"},
        		{"data":"focusNumber"},
                {"data":"wxUrl"},
                {"data":"id"}];
          	return jsonArr;
          }
     }

    /* 输入框模糊搜索 */
    $("#keyWord").autocomplete({
        source: function( request, response ) {
            $.post(path+"/wxqrCode/ajaxGetStaffListByLikeName",{param:request.term},function(data){
                if(data.status == "200"){
                    response($.map(data.data,function(d){
                        return {value:d.staffName,label:d.staffName,createUserId:d.staffId}
                    }));
                }
            },"json");
        },
        select: function(e, u){
            createUserId = u.item.staffId;
            console.log("createUserId--->"+staffId);
        }
    });

    $("#selectCardListByName").click(function (){
        keyWord = $("#keyWord").val();
        reloadTables();
    })
  </script>
</body>
</html>
